<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/CourseDetails.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="course">
			<header>
				<img src="img/Course%20Details/矩形%20527@2x.png">
			</header>

			<main>
				<p style="font-size: 0.32rem;">tony老师为你讲解职场小白工作中的问题</p>
				<figure>
					<span><img src="img/Course%20Details/501025475%20拷贝%202@2x.png"><span style="margin-left: 0.186666rem;">tony老师</span></span>
					<figcaption>1378人在观看</figcaption>
				</figure>
				<section>
					<span>讲师介绍：TONY老师是...</span><span>讲师介绍：TONY老师是...</span>
				</section>
			</main>
			<article>
				<p style="font-size: 0.48rem;margin: 0.186666rem 0;">其他课程回放</p>
				<ul class="box">
					<li>
						<h2 style="font-size: 0.24rem;">数据时代解析</h2>
						<span>在未来人工智有可能会取
							代人类的工作，重复工作
							的人们将...</span>
					</li>
					<li>
						<h2 style="font-size: 0.24rem;">数据时代解析</h2>
						<span>在未来人工智有可能会取
							代人类的工作，重复工作
							的人们将...</span>
					</li>
				</ul>
			</article>
			<ul class="head">
				<li class="headd">评论</li>
				<li>参数</li>
			</ul>
			<ul class="tab ">
				<li class="items" style="display: block;margin-bottom:1.6rem;">
					<ul>
						<li>
							<div class="mainer">
								<div>
									<img src="img/Course%20Details/501025475%20拷贝%202@2x.png" >
									<span style="margin-left: 0.186666rem;color: #747474;font-size: 0.32rem;">aliyap<br>北京市</span>
								</div>
								<div>
									<img src="img/Course%20Details/nubi.png" >
									<span style="font-size: 0.32rem;color: #747474;margin-left: 0.186666rem;">246</span>
								</div>
							</div>
							<p style="margin-left: 0.933333rem;margin-top: 0.186666rem;font-size: 0.32rem;">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启发，推荐大家都可以试听一些..</p>
							<p style="margin-left: 0.933333rem;;margin-top: 0.186666rem;">
								<span style="color: #747474;">30分钟前</span>
								<span style="color: #fd8a23;margin-left: 0.266666rem;">回复</span>
								<span style="color: #be3838;margin-left: 0.4rem;background-color: white;">删除</span>
							</p>
						</li>
						<li>
							<div class="mainer">
								<div>
									<img src="img/关注/501025475@2x.png" >
									<span style="margin-left: 0.186666rem;color: #747474;font-size: 0.32rem;">aliyap<br>北京市</span>
								</div>
								<div>
									<img src="img/Course%20Details/nubi.png" >
									<span style="font-size: 0.32rem;color: #747474;margin-left: 0.186666rem;">246</span>
								</div>
							</div>
							<p style="margin-left: 0.933333rem;margin-top: 0.186666rem;font-size: 0.32rem;">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启发，推荐大家都可以试听一些..</p>
							<p style="margin-left: 0.933333rem;;margin-top: 0.186666rem;">
								<span style="color: #747474;">30分钟前</span>
								<span style="color: #fd8a23;margin-left: 0.266666rem;">回复</span>
								<span style="color: #be3838;margin-left: 0.4rem;background-color: white;">删除</span>
							</p>
						</li>
						<li>
							<div class="mainer">
								<div>
									<img src="img/关注/500577327@2x(1).png" >
									<span style="margin-left: 0.186666rem;color: #747474;font-size: 0.32rem;">aliyap<br>北京市</span>
								</div>
								<div>
									<img src="img/Course%20Details/nubi.png" >
									<span style="font-size: 0.32rem;color: #747474;margin-left: 0.186666rem;">246</span>
								</div>
							</div>
							<p style="margin-left: 0.933333rem;margin-top: 0.186666rem;font-size: 0.32rem;">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启发，推荐大家都可以试听一些..</p>
							<p style="margin-left: 0.933333rem;;margin-top: 0.186666rem;">
								<span style="color: #747474;">30分钟前</span>
								<span style="color: #fd8a23;margin-left: 0.266666rem;">回复</span>
								<span style="color: #be3838;margin-left: 0.4rem;background-color: white;">删除</span>
							</p>
						</li>
						<div class="nav">
							<div>发表评论：最多不超过200个字</div>
							<div>
								<img src="img/niubi/linedesign-01@2x.png" >
								<img src="img/niubi/aixin@2x.png" >
								<img src="img/niubi/aixin@2x.png" >
							</div>
						</div>
					</ul>
				</li>
				<li class="items">
					<div class="details">
						<span class="i_header">1～2岁英语参数对比</span>
						<span><img src="img/Course%20Details/击败80%25@2x.png"></span>
					</div>
					<p class="keche">
						<span></span>
						<span>该课程的参数</span>
						<span style="margin-left: 0.266666rem;background-color: #A8A8A8;"></span>
						<span>同类课程数据</span>
					</p>
					<p class="keceee"><span style="font-size: 0.4rem;">课程参数</span><span style="font-size: 0.026666rem;margin-left: 0.186666rem;margin-top: 0.133333rem;color: #999999;">数据完整度90%</span></p>
					<footer>
						<p><span>价格</span><span>2399元</span></p>
						<p><span>课程体系</span><span>这里是类容，这里是类容，这里是类容，这里是类容，这里是类容，这里是类容。</span></p>
						<p><span>上课时间</span><span>上午8:30-12:00<br>下午2:00-6:00</span></p>
						<p><span>退费率</span><span>1.05%</span></p>
					</footer>
				</li>
			</ul>
			<ul class="footer">
				<li><a href="#"><span>&#xe8b9;</span><span>首页</span></a></li>
				<li><a href="#"><span style="color: orange;">&#xe614;</span><span>课程</span></a></li>
				<li><a href="#"><span>&#xe8bd;</span><span>话题</span></a></li>
				<li><a href="#"><span >&#xe8a0;</span><span>我的</span></a></li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var tab = document.querySelector('.head')
	var lis = tab.querySelectorAll('li');
	var items = document.querySelectorAll('.items');
	for (var i = 0; i <= lis.length - 1; i++) {
		lis[i].setAttribute('index', i);
		lis[i].onclick = function() {
			for (var i = 0; i <= lis.length - 1; i++) {
				lis[i].className = '';
			}
			this.className = 'headd';
			var index = this.getAttribute('index');
			for (var i = 0; i <= items.length - 1; i++) {
				items[i].style.display = "none";
			}
			items[index].style.display = "block";
		}
	}
</script>
